<template>
  <div class="app-container page-shop-detail">
    <div class="tabs-con">
      <el-tabs v-model="activeName">
        <!--基本信息-->
        <el-tab-pane
          :key="activeName"
          :label="$t('product.basicInformation')"
          name="1"
        >
          <div v-if="activeName==='1'">
            <base-info
              v-if="baseInfoShow"
              @close-browse="openBaseinfoEdit"
            />
            <base-info-edit
              v-else
              ref="baseInfoEditRef"
              @close-browse="openBaseinfo"
            />
          </div>
        </el-tab-pane>

        <!--工商信息-->
        <el-tab-pane
          :key="activeName"
          :label="$t('product.BusinessInfor')"
          name="2"
        >
          <div v-if="activeName==='2'">
            <businessInfo
              v-if="isbusinessInforShow"
              @close-browse="closeBusinessBrowse"
            />
            <business-info-edit
              v-else
              ref="businessInfoEditRef"
              @success-update="modifyBusinessInfo"
            />
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>
<script setup>
import baseInfo from './components/base-info/index.vue'
import baseInfoEdit from './components/base-info-edit/index.vue'
import businessInfo from './components/business-info/index.vue'
import businessInfoEdit from './components/business-info-edit/index.vue'

const route = useRoute()
const activeName = ref(route.query.activeName || '1')

const isbusinessInforShow = ref(true) // 浏览工商信息页
const businessInfoEditRef = ref(null)
/**
 * 打开工商信息编辑状态
 */
const closeBusinessBrowse = () => {
  isbusinessInforShow.value = false
}
/**
 * 工商信息修改成功，打开工商信息展示状态
 */
const modifyBusinessInfo = () => {
  isbusinessInforShow.value = true
}

const baseInfoEditRef = ref(null)
const baseInfoShow = ref(true)
/**
 * 打开基本信息编辑
 */
const openBaseinfoEdit = () => {
  baseInfoShow.value = false
}
/**
 * 打开基本信息展示
 */
const openBaseinfo = () => {
  baseInfoShow.value = true
}

</script>

<style lang="scss" scoped>
.app-container.page-shop-detail {
  font-size: 14px;
  color: #333;
}
</style>
